/* Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details. */
/* All rights reserved.  Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import url("../common/spark_widget.css");

:host {
  display: inline-block;
}

#button::content > * {
  height: 100%;
  width: 100%;
}

#overlay {
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-top: 7px;
}

/* TODO(ussuri): The values in the 2 translateX()'s below are very ad-hoc.
   They currently align well with the menu button icon in Spark, but
   don't work well e.g. for the one in examples/spark_menu_button. Fix.
 */
:host([arrow=top-right]:host) #overlay {
  /* NOTE: calc() and 100% are important -- if just a percentage is used,
     e.g. translateX(-91%), the fonts may get blurry. */
  -webkit-transform: translateX(calc(-100% + 40px));
}

:host([arrow=top-left]:host) #overlay {
  /* NOTE: Don't use an odd percentage here; see above why. */
  -webkit-transform: translateX(-5px);
}

:host([arrow=top-center]:host) #overlay {
}

#menu{
  margin: 5px 0;
}
